<template>
  <modal-box :show="$store.state.showMenu" @close="$store.commit('setShowMenu', false)">
    <div class="menu-modal">
      <h2>新建清单</h2>
      <input type="text" placeholder="输入清单名" v-model.trim="name">
      <button @click="save">完成</button>
    </div>
  </modal-box>
</template>

<script>
import ModalBox from "./ModalBox.vue";
export default {
  components: { ModalBox },
  data() {
    return {
      name: '', // 菜单名称
    }
  },
  methods: {
    save() {
      // ! 不允许直接修改 state / props !
      // const list = JSON.parse(JSON.stringify(this.$store.state.list))
      // list.push({
      //   name: this.name,
      //   items: []
      // })
      // this.$store.commit('setList', list);

      this.$store.commit('addMenu', this.name);
      this.$store.commit('setShowMenu', false);

      this.name = '';
    }
  }
};
</script>
